import {animate, keyframes, state, style, transition, trigger} from "@angular/animations";


//测试 login组件 的进入场动画
const mytrigger = trigger('mytrigger', [
  transition('void=>*', [style({opacity: 0, position: 'absolute'}), animate('500ms 5ms ease-in', style({
    opacity: 1,
    position: 'absolute'
  }))]),
  transition('*=>void', [style({opacity: 1, position: 'absolute'}), animate('500ms  5ms ease-in', style({
    opacity: 0,
    position: 'absolute'
  }))])
]);
//菜单的展开，收起 动画
const fadeIn = trigger('fadeIn', [
  state("*", style({
    //opacity: 1,
    height: "*"
  })),
  transition("void=>*", [animate("300ms 1ms ease-in", keyframes([style({
    // opacity: 0,
    height: 0,
    offset: 0
  }), style({
    // opacity: 1,
    height: "*",
    offset: 1
  })]))]),
  transition("*=>void", [animate("300ms 1ms ease-in", style({
    //opacity: 0,
    height: 0
  }))])
]);

export {mytrigger, fadeIn}
